﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>在线考试</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="../../../static/css/font.css">
    <link rel="stylesheet" href="../../../static/css/weadmin.css">
    <style type="text/css">
        .layui-card-header {
            border: 1px solid #f6f6f6;
            font-weight: bold;
        }

        .layui-btn-group .layui-btn:first-child {
            border-left: 1px solid #c9c9c9;
            border-radius: 2px 0 0 2px;
        }

        .layui-btn-group .layui-btn {
            border: 1px solid #c9c9c9;
        }
    </style>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
    <div class="weadmin-nav">
        <span class="layui-breadcrumb" style="visibility: visible;">
            <a href="#">首页</a><span lay-separator="">/</span>
            <a href="#">考试管理</a><span lay-separator="">/</span>
            <a><cite>在线考试</cite></a>
        </span>
        <!--<a class="layui-btn layui-btn-sm" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新">
            <i class="layui-icon" style="line-height:30px">&#x1002;</i>
        </a>-->
    </div>
    <div class="weadmin-body">
        <div class="layui-col-md7">
            <!-- 填充内容 -->
            <div class="layui-card">
                <div class="layui-card-header">试题详情</div>
                <div class="layui-card-body">
                    <span style="color:blue" id="questionTitle"></span><br />
                    <span style="font-weight:bold" id="questionContent"></span><br /><br />
                    <!--选择题-1-->
                    <div class="layui-btn-group" id="questionAnswer1">
                        <button class="layui-btn layui-btn-primary" value="A">A</button>
                        <button class="layui-btn layui-btn-primary" value="B">B</button>
                        <button class="layui-btn layui-btn-primary" value="C">C</button>
                        <button class="layui-btn layui-btn-primary" value="D">D</button>
                    </div>
                    <!--判断题-2-->
                    <div class="layui-btn-group" id="questionAnswer2">
                        <button class="layui-btn layui-btn-primary" value="对"><i class="layui-icon layui-icon-ok"></i></button>
                        <button class="layui-btn layui-btn-primary" value="错"><i class="layui-icon layui-icon-close"></i></button>
                    </div>
                    <!--填空题-3-->
                    <textarea id="questionAnswer3" name="" placeholder="请输入答案，如多填项，各项答案请以|做分割" class="layui-textarea"></textarea>
                    <!--简单题-4-->
                    <textarea id="questionAnswer4" name="" placeholder="请输入答案，如多答项，各项答案请以|做分割" class="layui-textarea"></textarea>
                    <!--综合题-5-->
                    <textarea id="questionAnswer5" name="" placeholder="请输入答案，如多答项，各项答案请以|做分割" class="layui-textarea"></textarea>
                </div>
                <div class="layui-card-body">
                    <button class="layui-btn" id="prevQuestion">上一题</button>
                    <button class="layui-btn" id="nextQuestion">下一题</button>
                </div>
            </div>
        </div>
        <div class="layui-col-md5">
            <div class="layui-card">
                <div class="layui-card-header"><span style="font-size:30px;font-weight:bold;color:#FF9900;">考试剩余时间:<span id="remainTime"></span></span></div>
                <div class="layui-card-header">答题情况</div>
                <div class="layui-card-body">
                    <div class="layui-btn-group" id="btnList">
                    </div>
                </div>
                <div class="layui-card-body" style="text-align:center;">
                    <button class="layui-btn" id="btnSubmit">确认交卷</button>
                </div>
            </div>
        </div>
    </div>
    <script src="../../../lib/layui/layui.js" charset="utf-8"></script>
    <script src="../../../static/js/common.js" charset="utf-8"></script>
    <script>
        layui.use(['jquery', 'layer'], function () {
            var $ = layui.jquery,
                layer = layui.layer;
            $.support.cors = true;
            $.ajaxSetup({
                cache: false,
                headers: {
                    "userid": JSON.parse(window.localStorage.authInfo).UserId,
                    "signtoken": JSON.parse(window.localStorage.authInfo).SignToken,
                },
            })
            //刷新或关闭页面时执行异常交卷操作，但部分浏览器兼容有问题，界面需加上提醒
            $(window).on('beforeunload unload', function () {
                SubmitExam("exception");
            });

            var EUID = getUrlParam("EUID");
            var ExamPaperInfo;//试卷信息
            var QuestionsInfo;//试卷试题
            var CountDown;//倒计时器
            var CountDownSecond;//考试时间，既倒计时时间*60
            var CurrQuestionNum = 1;//默认加载第一题
            var examinfoajax = $.ajax({
                url: ApiUrl + "Exam/GetExamInfo",
                type: 'get',
                dataType: 'json',
                data: { EPID: getUrlParam("EPID"), EUID: EUID },
                success: function (data) {
                    console.log(data)
                    if (data.StatusCode == 200 && data.Count != 0) {
                        ExamPaperInfo = data.Data[0][0];
                        QuestionsInfo = data.Data[1];
                        CountDownSecond = ExamPaperInfo.RemainSeconds;
                    }
                    else if (data.StatusCode == 403) {
                        top.layer.alert(data.Info + ",请重新登录！", { closeBtn: 0 }, function () {
                            top.location.href = "http://" + top.location.host + "/login.html";
                        })
                    }
                    else {
                        layer.msg(data.Info);
                    }
                }
            });
            $.when(examinfoajax)
                .done(function () {
                    BeginCountDown();
                    $.each(QuestionsInfo, function (index, item) {
                        LoadNumButton(item);
                        LoadQuestion();//加载试题，默认加载第1题
                    })
                })
                .fail(function () {
                    layer.msg("考试加载失败！");
                });
            //加载试题数字按钮
            function LoadNumButton(item) {
                var showNumStr = (item.EAOrder < 10 ? ('&nbsp;' + item.EAOrder + '&nbsp;') : item.EAOrder);
                $("#btnList").append('<button data-btnnum="' + item.EAOrder + '" class="layui-btn layui-btn-primary">' + showNumStr + '</button>');
            }
            //试题按钮点击事件
            $("#btnList").on("click", "button", function (event) {
                //保存当前试题答案，选择判断题点击答案时保存答案，其他题型，更改试题时保存答案
                SaveCurrentAnswer();
                //更新当前按钮
                CurrQuestionNum = $(this).data("btnnum");
                //加载所选试题
                LoadQuestion();
            })
            //加载试题
            function LoadQuestion() {
                //更新按钮列表颜色
                $("#btnList").children().each(function (index) {
                    if (QuestionsInfo[index].EARAnswer != "") {
                        $(this).removeClass("layui-btn-warm").removeClass("layui-btn-primary");
                    }
                    else {
                        $(this).removeClass("layui-btn-warm").addClass("layui-btn-primary");
                    }
                })
                //更改当前加载试题的试题颜色
                $("#btnList").children().eq(CurrQuestionNum - 1).removeClass("layui-btn-primary").addClass("layui-btn-warm");
                //加载当前试题信息
                var questionInfo = QuestionsInfo[CurrQuestionNum - 1];
                $("#questionTitle").html("第" + CurrQuestionNum + "题【" + questionInfo.ETName + "】【" + questionInfo.EQScore + "分】");
                $("#questionContent").html(questionInfo.EQContent);
                //如果已做，加载答案
                if (questionInfo.ETID == 1 || questionInfo.ETID == 2) {
                    $("#questionAnswer" + questionInfo.ETID).children().each(function () {
                        if (questionInfo.EARAnswer == $(this).val()) {
                            $(this).removeClass("layui-btn-primary");
                        }
                        else {
                            $(this).addClass("layui-btn-primary");
                        }
                    })
                }
                else {
                    $("#questionAnswer" + questionInfo.ETID).val(questionInfo.EARAnswer);
                }
                //显示当前试题对应的答案栏
                for (var i = 1; i <= 5; i++) {
                    $("#questionAnswer" + i).css("display", "none");
                }
                $("#questionAnswer" + questionInfo.ETID).css("display", "block");
            }
            //选择题点击事件
            $("#questionAnswer1,#questionAnswer2").on("click", "button", function (event) {
                $(this).parent().children().each(function () {
                    $(this).addClass("layui-btn-primary");
                })
                $(this).removeClass("layui-btn-primary");
                QuestionsInfo[CurrQuestionNum - 1].EARAnswer = $(this).val();
            })
            //保存当前试题答案（选择题，判断题外的其他题型使用）
            function SaveCurrentAnswer() {
                var currETID = QuestionsInfo[CurrQuestionNum - 1].ETID;
                if (currETID == 3 || currETID == 4 || currETID == 5) {
                    QuestionsInfo[CurrQuestionNum - 1].EARAnswer = $("#questionAnswer" + currETID).val();
                }
            }
            //上一题下一题
            $("#prevQuestion,#nextQuestion").on("click", function (event) {
                SaveCurrentAnswer();
                if ($(this).attr("id") == "prevQuestion") {
                    if (CurrQuestionNum > 1) {
                        CurrQuestionNum = CurrQuestionNum - 1;
                        LoadQuestion();
                    }
                }
                else {
                    if (CurrQuestionNum < QuestionsInfo.length) {
                        CurrQuestionNum = CurrQuestionNum + 1;
                        LoadQuestion();
                    }
                }
            })
            //确认交卷
            $("#btnSubmit").click(function () {
                SubmitExam("normal");
            })
            //交卷操作
            function SubmitExam(submitType) {
                var ajaxurl = "Exam/SubmitExam";
                var finishQuestionCount = 0;
                var postdata = [];
                $.each(QuestionsInfo, function (index, item) {
                    postdata.push({ EUID: EUID, EQID: item.EQID, EARAnswer: item.EARAnswer })
                    if ($.trim(item.EARAnswer) != "") {
                        finishQuestionCount++;
                    }
                })
                if (submitType == "normal") {
                    var msg = finishQuestionCount == QuestionsInfo.length ? "已完成所有试题，是否确认交卷？" : "尚有" + (QuestionsInfo.length - finishQuestionCount) + "试题未做，是否确认交卷？";
                    layer.confirm(msg, function (index) {
                        SubmitExamAjax(ajaxurl, postdata);
                        layer.close(index);
                    })
                }
                else if (submitType == "overtime") {
                    layer.alert("考试时间结束，将自动确认交卷", function () {
                        SubmitExamAjax(ajaxurl, postdata);
                    })
                }
                else if (submitType == "exception") {
                    ajaxurl = "Exam/SubmitExceptionExam";
                    SubmitExamAjax(ajaxurl, postdata);
                }
            }
            //提交试卷
            function SubmitExamAjax(ajaxurl, postdata) {
                $.ajax({
                    url: ApiUrl + ajaxurl,
                    type: 'post',
                    dataType: 'json',
                    contentType: 'application/json',//提交数组数据时必须添加
                    data: JSON.stringify(postdata),
                    success: function (data) {
                        console.log(data)
                        if (data.StatusCode == 200 && data.Count != 0) {
                            layer.alert(data.Info, function () {
                                parent.layer.closeAll();
                            })
                        }
                        else if (data.StatusCode == 403) {
                            top.layer.alert(data.Info + ",请重新登录！", { closeBtn: 0 }, function () {
                                top.location.href = "http://" + top.location.host + "/login.html";
                            })
                        }
                        else {
                            layer.msg(data.Info);
                        }
                    }
                })
            }
            //开启倒计时
            function BeginCountDown() {
                SetCountDown();//先执行一次，不然有很明显的1秒后才出现
                CountDown = window.setInterval(SetCountDown, 1000); //间隔函数，1秒执行
            }
            //倒计时计算（将时间减去1秒，计算天、时、分、秒）
            function SetCountDown() {
                if (CountDownSecond > 0) {
                    CountDownSecond = CountDownSecond - 1;
                    var second = Math.floor(CountDownSecond % 60);            // 计算秒
                    second = second < 10 ? '0' + second : second;
                    var minite = Math.floor((CountDownSecond / 60) % 60);      //计算分
                    minite = minite < 10 ? '0' + minite : minite;
                    var hour = Math.floor((CountDownSecond / 3600) % 24);      //计算小时
                    //var day = Math.floor((CountDownSecond / 3600) / 24);       //计算天
                    var hourDiv = "<span id='hourSpan'>" + hour + ":" + "</span>";
                    //var dayDiv = "<span id='daySpan'>" + day + "天" + "</span>";
                    //$("#remainTime").html(dayDiv + hourDiv + minite + "分" + second + "秒");
                    $("#remainTime").html(hourDiv + minite + "分" + second + "秒");
                    if (hour === 0) {//当不足1小时时隐藏小时
                        $('#hourSpan').css('display', 'none');
                    }
                    //if (day === 0) {//当不足1天时隐藏天
                    //    $('#daySpan').css('display', 'none');
                    //}
                } else {//剩余时间小于或等于0的时候，就停止间隔函数
                    window.clearInterval(CountDown);
                    //这里可以添加倒计时时间为0后需要执行的事件
                    SubmitExam("overtime");
                }
            }
        });
    </script>
</body>
</html>